<template>
	<view class="">
		<view class=" pr flex row-center" v-if="list.length" :style="[styleSize]">
			<image :src="$baseUrl+'/img/turntable_bg.png'" class="pa w-max h-max top0 left0"></image>
			<view class="pa radius ov-h" style="background-color: #fcf9f000;"
				:style="[styleSize,{transform:'rotate('+(play?(quan*360)-((360/list.length)*jiangIndex):0)+'deg)',transition:play?time+'ms':'none',}]">
				<view class="h-max flex-col col-center itembox"
					:style="{transform:'rotate('+((360/list.length)*index)+'deg)'}" v-for="(item,index) in list"
					:key="index">
					<view class="item pr"
						:style="{borderTopColor:index%2?'#fcf9f0':'#ffeaa7',borderWidth:(size/2)+'rpx', borderLeftWidth:sanWidth ,borderRightWidth:sanWidth} ">
						<view class="pa fs20 bottom90 nowrap "
							style="left: 0; transform: translateX(-50%);color: #A8872A;">
							<view>{{item.name||index}}</view>
						</view>
					</view>
					<view class=""></view>
				</view>
			</view>
			<view class="pa w140 h140 flex bg yuan radius" @click="click_play()"/>
			<view class="pr z-index100" style=" pointer-events: none">
				<text v-if="is_play">开始</text>
				<text v-else-if="play&&!is_play">抽奖中</text>
				<text v-else>...</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "z-turntable",
		props: {
			list: {
				default: []
			},
			time: {
				default: 5000
			},
			quan: {
				default: 2
			},
			size: {
				default: 400
			},
		},
		computed: {
			sanWidth() {
				return (this.size*2 / this.list.length) + 'rpx'
			},
			styleSize() {
				return {
					"width": this.size + 'rpx',
					"height": this.size + 'rpx',
				}
			},
		},
		data() {
			return {
				play: false, // true开始后 会旋转 ,false重置转盘样式
				jiangIndex: 1, //中奖的 index
				is_play: true, //是否可以点击 开始 旋转中
			};
		},
		methods: {
			click_play() {
				if (!this.is_play) return this.$msg('别急')
				this.is_play = false
				this.$emit('clickPlay')
			},
			start(jiangIndex) {
				this.jiangIndex = jiangIndex - 1
				if (this.play) this.play = false //先重置
				setTimeout(() => this.play = true, 20) //延迟
				setTimeout(() => {
					this.is_play = true
					this.$emit('success', jiangIndex)
				}, this.time)
			}
		}
	}
</script>

<style lang="scss">
	.color {
		color: #FEE1AB;
	}

	.bg {
		background-color: #fc7569;
	}

	.yuan {
		// position: relative;
		border: 8rpx solid #fcf9f0;
	}

	.itembox {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.item {
		width: 0;
		height: 0;

		border-style: solid;
		border-color: transparent;
		border-top-color: #ffeaa7;
	}

	.yuan::before {
		content: '';
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translateX(-50%);

		width: 0;
		height: 0;
		border-width: 0 20rpx 30rpx;
		border-style: solid;
		border-color: transparent transparent #fc7569;
	}

	.zuan {
		transition: 5s;
	}
</style>